<template>
  <div id="bingmap-container"></div>
</template>
<script>
import * as Cesium from 'cesium';
import Clock from 'cesium/Source/Core/Clock';
export default {
  data() {
    return {};
  },
  mounted() {
    const viewer = new Cesium.Viewer('bingmap-container', {
      baseLayerPicker: false, // 地图选择按钮
      geocoder: false, // 搜索按钮，
      homeButton: false, // 跳转主页按钮
      animation: false, // 动画按钮
      creditsDisplay: false, //
      timeline: true, // 时间轴按钮
      fullscreenButton: false, // 全屏功能显示按钮
      scene3DOnly: false,
      navigationHelpButton: false, // 操作帮助按钮
      infoBox: true,
      selectionIndicator: false,
      sceneModePicker: false, // 是否开启平面图选择
      terrainShadows: Cesium.ShadowMode.DISABLED,
      shouldAnimate: true
    });
    // 设置初始位置
    viewer.camera.setView({
      destination: Cesium.Cartesian3.fromDegrees(110.2, 34.55, 20000000)
    });
    //  去除水印
    viewer._cesiumWidget._creditContainer.style.display = 'none';
    // 高德标注
    viewer.imageryLayers.addImageryProvider(
      new Cesium.UrlTemplateImageryProvider({
        url: 'http://webst02.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8'
      })
    );

    const scene = viewer.scene;

    // 切面
    var clippingPlanes = new Cesium.ClippingPlaneCollection({
      planes: [new Cesium.ClippingPlane(new Cesium.Cartesian3(0.0, 0.0, -1.0), 0.0)],
      edgeWidth: 1.0
    });
    // 加载模型
    var tileset = scene.primitives.add(
      new Cesium.Cesium3DTileset({
        url: Cesium.IonResource.fromAssetId(8564),
        // 切面
        clippingPlanes: clippingPlanes
      })
    );

    // 时钟
    var start = Cesium.JulianDate.fromIso8601('2021-09-01');
    var end = Cesium.JulianDate.fromIso8601('2021-09-02');

    viewer.timeline.zoomTo(start, end);

    var clock = viewer.clock;
    clock.startTime = start;
    clock.endTime = end;
    clock.currentTime = start;
    clock.clockRange = Cesium.ClockRange.LOOP_STOP;
    clock.multiplier = 60;

    // 加载 3dtiles
    tileset.readyPromise
      .then(function (tileset) {
        // 相机指向 实体
        viewer.zoomTo(tileset, new Cesium.HeadingPitchRange(0.5, -0.2, tileset.boundingSphere.radius * 3.2));
        // 设置显示切面 透明
        const boundingSphere = tileset.boundingSphere;
        const radius = boundingSphere.radius;

        // 使切面与3dtile对齐，确保能切到
        if (!Cesium.Matrix4.equals(tileset.root.transform, Cesium.Matrix4.IDENTITY)) {
          // The clipping plane is initially positioned at the tileset's root transform.
          // Apply an additional matrix to center the clipping plane on the bounding sphere center.
          var transformCenter = Cesium.Matrix4.getTranslation(tileset.root.transform, new Cesium.Cartesian3());
          var transformCartographic = Cesium.Cartographic.fromCartesian(transformCenter);
          var boundingSphereCartographic = Cesium.Cartographic.fromCartesian(tileset.boundingSphere.center);
          var height = boundingSphereCartographic.height - transformCartographic.height;
          clippingPlanes.modelMatrix = Cesium.Matrix4.fromTranslation(new Cesium.Cartesian3(0.0, 0.0, height));
        }

        const changePlane = (plane) => {
          return function (time) {
            // const sec = Cesium.JulianDate.toDate(time).getTime() / 1000;
            // plane.distance = (sec % 300) - 150;
            const sec = Cesium.JulianDate.toDate(time).getTime() / 1000;
            plane.distance = (sec % 300) - 120;
            return plane;
          };
        };

        // 设置一透明可见面
        for (var i = 0; i < clippingPlanes.length; ++i) {
          const plane = clippingPlanes.get(i);
          viewer.entities.add({
            position: boundingSphere.center,
            plane: {
              dimensions: new Cesium.Cartesian2(radius * 2.5, radius * 2.5),
              // material: Cesium.Color.WHITE.withAlpha(0.1),
              material: Cesium.Color.WHITE.withAlpha(0),
              plane: new Cesium.CallbackProperty(changePlane(plane), false)
              // outline: true,
              // outlineColor: Cesium.Color.WHITE
            }
          });
        }
      })
      .otherwise(function (error) {
        console.log(error);
      });

    // ------------------ 设置切面----------------------------------------
    // tileset.debugShowBoundingVolume = true; // 显示范围框
  },
  methods: {}
};
</script>
<style lang="scss" scoped>
#bingmap-container {
  height: 100%;
  position: relative;
  cursor: crosshair;
}
</style>
